<template>
  <n-card :header-style="{ padding: '10px', background: '#F1F5FF', marginBottom: '10px' }">
    <template #header>{{ index }}.广告创意形式</template>
    <n-empty description="请先选择广告版位" v-if="position.siteSet.length == 0 && !creativor.loading">
    </n-empty>
    <n-skeleton :repeat="8" text v-if="creativor.loading"></n-skeleton>
    <div v-else>
      <x-form ref="formRef" v-model:model="creativor" label-placement="top" label-width="140"
        v-if="position.siteSet.length">
        <n-form-item label="投放模式" path="deliveryMode">
          <div class="flex-1">
            <n-radio-group :value="creativor.deliveryMode" @update:value="changeDeliveryMode">
              <n-radio-button key="DELIVERY_MODE_CUSTOMIZE" value="DELIVERY_MODE_CUSTOMIZE" label="自定义创意" />
              <n-radio-button key="DELIVERY_MODE_COMPONENT" value="DELIVERY_MODE_COMPONENT" label="组件化创意" />
            </n-radio-group>
            <div v-if="creativor.deliveryMode === 'DELIVERY_MODE_COMPONENT'" class="mt-10">
              <span class="text-label mr-5">指定创意形式</span>
              <n-switch @update:value="changeSpecifiedForm" :checked-value="1" :unchecked-value="0"
                v-model:value="creativor.specified_form" :disabled="adv.market.isWxChannelsLive"></n-switch>
            </div>
          </div>
        </n-form-item>
        <n-form-item label="创意模式" path="goal" v-if="!creativor.unSpecifiedForm">
          <n-radio-group v-model:value="creativor.way" @update:value="changeWay">
            <n-radio-button :key="item.id" :value="item.id" :label="item.name"
              v-for="(item, i) in creativeTemplateList" />
          </n-radio-group>
        </n-form-item>
        <div style="margin-left: 0" v-if="!creativor.unSpecifiedForm">
          <!-- n-scrollbar -->
          <n-scrollbar x-scrollable>
            <div class="meta flex">

              <div @click="changeTemplateId(item, i)"
                :class="['flex items-center create-way-card', templateActive(item) ? 'create-way-card--active' : '']"
                v-for="(item, i) in currentTemplateList" :key="i">
                <span class="icon-select" v-if="templateActive(item)">
                  <n-icon color="#fff" size="14" :component="CheckOutlined" />
                </span>

                <!-- {{ item.creativeTemplateName }} -->
                <span style="width: 21px;height: 36px;">
                  <img style="width: 100%;height: 100%;" v-if="/^http/.test(previewPic(item))"
                    :src="previewPic(item)" />
                  <div v-else v-html="previewPic(item)" style="width: 21px;height: 36px;" />
                </span>

                <span class="name">{{ item.creativeTemplateName }} </span>

              </div>
            </div>
          </n-scrollbar>
          <!-- children -->

        </div>
        <n-form-item label="图片数" path="goal" v-if="currentNextTemplate.children.length">

          <n-radio-group v-model:value="creativor.creativeTemplateId" @update:value="changeNextTemplateId">
            <n-radio-button :key="item.creativeTemplateId" :value="item.creativeTemplateId"
              :label="item.creativeTemplateName" v-for="(item, i) in currentNextTemplate.children" />
          </n-radio-group>
        </n-form-item>
      </x-form>
    </div>
  </n-card>
</template>
<script setup lang="ts">
import { computed, onBeforeMount, onMounted, reactive, ref, toRefs } from 'vue';
import { useStore } from '@/store';
import { NSkeleton, FormItemRule, NCard, NEmpty, NModal, useDialog, NDataTable, NFormItem, NSelect, NSpin, NTag, NRadioGroup, NRadioButton, NScrollbar, NIcon, NSwitch } from 'naive-ui';
import { XForm, XButton, XDataTable } from '@/components';
import { CheckOutlined } from '@vicons/antd'
import { getAdsTemplateDetail, getAdsTemplateList } from '@/api/intelligent';

defineProps({
  index: {
    type: Number
  }
})

const store = useStore();
const creativor = computed(() => store.state.adv.modal.creativor);
const adv = computed(() => store.state.adv.modal)
const dialog = useDialog();
const position = computed(() => {
  return store.state.adv.modal.position
})

const creativeTemplateList = computed(() => {
  return store.state.adv.creativeTemplateList;
})
const currentTemplateList = computed(() => {
  return (creativeTemplateList.value.find((item: any) => item.id === creativor.value.way) || []).children || []
})

const account = computed(() => {
  const accounts = store.state.adv.accounts;
  return accounts[0]
})

const siteSet = computed(() => {
  return position.value.siteSet
})

const isFriend = computed(() => {
  return siteSet.value.some((item: number) => item === 102)
})

function previewPic(row: { adcreativeSampleImage: any; creativeTemplateId: any }) {
  if (row.adcreativeSampleImage) {
    return row.adcreativeSampleImage
  } else {
    switch (row.creativeTemplateId) {
      case 711:
      case 712:
      case 713:
      case 714:
      case 715:
      case 716:
      case 717:
      case 718:
      case 719:
      case 720:
      case 721:
      case 722:
      case 723:
      case 724:
      case 725:
        return `http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/creative_template_${row.creativeTemplateId}.svg`
      case 263:
      case 311:
        return '<svg style="width: 100%;height: 100%"  viewBox="0 0 40 68" width="55.88" height="95" xmlns="http://www.w3.org/2000/svg"><title>图片-常规大图</title><g fill="none" fill-rule="evenodd"><rect stroke="#DCDEE3" fill="#FFF" x=".5" y=".5" width="39" height="67" rx="4"></rect><path fill="#3B4457" opacity=".044" d="M8 14h10v2H8zM8 62h10v2H8zM8 17h29v2H8zM8 65h29v2H8zM8 46h29v9H8zM1 58h38v1H1zM8 20h24v2H8zM32 14h5v2h-5zM32 62h5v2h-5z"></path><path fill="#B7BCC4" d="M8 43h5v1H8z"></path><path fill="#3B4457" opacity=".044" d="M3 14h4v4H3zM3 62h4v4H3zM4 1h32a3 3 0 013 3v7H1V4a3 3 0 013-3z"></path><path fill="#FFAB3C" d="M8 23h19v19H8z"></path></g></svg>'
      case 450:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/mp-img-basic.svg'
      case 452:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/mp-video-basic.svg'
      case 588:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/mp-img-tag.svg'
      case 589:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/mp-video-tag.svg'
      case 618:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/mp-video-nor.svg'
      case 641:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/mp-img-multimg.svg'
      case 925:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/ad-process/images/creative-size-banner.svg'
      case 929:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/creative_template_720.svg'
      case 927:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/creative_template_711.svg'
      case 951:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/pcdatu-click.svg'
      case 965:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/pctonglan.svg'
      case 1030:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/sixpalace.svg'
      case 1064:
      case 1480:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/mp-video-nor-9-16.svg'
      case 1465:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/tpl-video-16-9.svg'
      default:
        return 'http://qzonestyle.gtimg.cn/gdt_ui_proj/dist/gdt/imgbox/creative-template-pc-placeholder.svg'
    }
  }
}

onBeforeMount(() => {


});


const currentNextTemplate = computed(() => {
  return currentTemplateList.value.find(_ => _.children && _.children.length && _.children.map(_ => _.creativeTemplateId).includes(creativor.value.creativeTemplateId)) || { children: [] };

});


async function changeSpecifiedForm() {
  creativor.value.creativeTemplateId = undefined;
  await store.dispatch('adv/getTemplateInfo');
  store.commit('adv/SET_NORMAL_COMPOENT_INFO');




}



// 设置模版id 并且创建tempate
async function changeTemplateId(item: any, i) {
  if (!account.value) return;
  if (item.children) {
    const _item = item.children.length && item.children[0];
    creativor.value.creativeTemplateId = _item.creativeTemplateId;
  } else {
    creativor.value.creativeTemplateId = item.creativeTemplateId;
  }
  await store.dispatch('adv/getTemplateInfo');
  store.commit('adv/SET_NORMAL_COMPOENT_INFO');

  // creativor.value.
}

async function changeNextTemplateId(id: any) {
  if (!account.value) return;
  creativor.value.creativeTemplateId = id;
  store.dispatch('adv/getTemplateInfo');
  await store.commit('adv/SET_NORMAL_COMPOENT_INFO');

}



function changeDeliveryMode(v: any) {

  dialog.warning({
    title: '确认切换投放默认?',
    content: '切换投放模式后，会清空当前已填写的创意内容!',
    positiveText: '继续',
    negativeText: '取消',
    onPositiveClick: () => {
      creativor.value.deliveryMode = v;
      creativor.value.creativeTemplateId = undefined;
      store.commit('adv/EMPTY_CREATIVE_GROUPS')

      // console.log('empty');
    },
    onNegativeClick: () => {

    }
  })

}



function changeWay() {
  creativor.value.creativeTemplateId = undefined;
  store.commit('adv/EMPTY_CREATIVE_GROUPS')

}

function templateActive(item) {
  if (item.children) {
    return item.children.map(_ => _.creativeTemplateId).includes(creativor.value.creativeTemplateId);
  } else {
    return item.creativeTemplateId === creativor.value.creativeTemplateId;
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/var';

// @import url('co');
.meta {
  padding: 12px;
  background: #f7f9fc;
  overflow-x: auto;
  white-space: nowrap;
}

.create-way-card {
  // width: 100px;
  position: relative;
  padding: 14px;
  border-radius: 4px;
  border: 1px solid #E4E7F2;
  background: #E4E7F2;
  // overflow: hidden;
  cursor: pointer;

  .icon-select {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-items: center;
    background-color: $primaryColor;
    text-align: center;
    justify-content: center;
    border-radius: 0 0 0 4px;
  }

  &.create-way-card--active {
    border-color: $primaryColor;
  }

  .name {
    margin-left: 12px;
  }
}

.create-way-card+.create-way-card {
  margin-left: 12px;
}
</style>
